<template>
	<view>
		<view class="">
			<u-search placeholder="日照香炉生紫烟" :showAction="false" v-model="keyword"></u-search>
		</view>

		<view class="main">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="u-tab-item" :class="{'u-tab-item-active':item.id == params.current}"
					v-for="(item,index) in list1" :key="index" @click="changeCate(item.name)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-Y goods-list">
				<u-list>
					<u-list-item v-for="(item, index) in goodsList" :key="index">
						<u-cell :title="item.name" @click="goDetail(item.id)">
							<u-avatar slot="icon" shape="square" size="35" :src="item.pic"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
						</u-cell>
					</u-list-item>
				</u-list>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				list1: [],
				params: {
					pagenum: 1,
					pagesize: 20,
					current: ""
				},
				goodsList: []
			}
		},
		methods: {
			changeCate(cname) {
				this.current = cname
			},
			// 获取分类
			getCateList() {
				uni.$u.http.request({
					url: "goods/category/all",

				}).then(res => {
					this.list1 = res.data;
					// this.$forceUpdate();
					this.params.current = this.list1[0].id;
					this.getGoodsList();
				})
			},
			// 获取商品列表
			getGoodsList() {
				uni.$u.http.request({
					url: "goods/list/v2",
					data: this.params,
					method: "POST"
				}).then(res => {
					this.goodsList = res.data.result
				})
			},
			// 去详情页
			goDetail() {
				uni.navigateTo({
					url: "/pages/detail/detail"
				})
			}
		},
		onShow() {
			this.getCateList();
		}
	}
</script>

<style lang="less">
	// .scroll-Y {
	// 	height: 100%;
	// }
	.main {
		display: flex;
		height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top) - 35rpx);

		.scroll-Y {
			flex: 1;
			background-color: #ccc;
			height: 100%;

			.u-tab-item {
				height: 100rpx;
				background: #f6f6f6;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #444;
				line-height: 1;
			}

			.u-tab-item-active {
				border-left: 10rpx solid #e64340;
			}
		}

		.goods-list {
			flex: 3;
		}
	}
</style>
